<template>
    <el-dialog style="top: 10%" v-model="visible" title="编辑" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
            label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="预定展会">
                        <el-input v-model="dataForm.exhibitionName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="公司名称">
                        <el-input v-model="dataForm.company" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人">
                        <el-input v-model="dataForm.userName" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="联系电话">
                        <el-input v-model="dataForm.phone" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="职位">
                        <el-input v-model="dataForm.position" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="主营产品">
                        <el-input v-model="dataForm.product" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="公司地址">
                        <el-input v-model="dataForm.address" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="首次参展">
                        <el-input v-model="dataForm.isFirst" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="展位面积">
                        <el-input v-model="dataForm.area" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="备注">
                        <el-input v-model="dataForm.remark" placeholder="请输入备注"
                            style="width: 870px; margin-left: -70px;" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">保存</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { ElMessage } from "element-plus";

const { t } = useI18n();
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
    id: "",
    exhibitionName: "",
    company: "",
    userName: "",
    phone: "",
    position: "",
    product: "",
    address: "",
    isFirst: "",
    area: "",
    remark: "",

});

const rules = ref({});

const init = (id?: number) => {
    visible.value = true;
    setTimeout(() => {
        getInfo(id);
    }, 100);
};

const getInfo = (id?: number) => {
    if (!id) return;
    baseService.get(`/noc/nocuserexhibtionapply/info/${id}`)
        .then((res) => {
            const data = (res as any).data ?? res;
            const user = data.exhibitionBusinessUser ?? data;
            dataForm.id = user.id;
            dataForm.exhibitionName = user.exhibitionName;
            dataForm.company = user.company;
            dataForm.userName = user.userName;
            dataForm.phone = user.phone;
            dataForm.position = user.position;
            dataForm.product = user.product;
            dataForm.address = user.address;
            dataForm.isFirst = user.isFirst;
            dataForm.area = user.area;
            dataForm.remark = user.remark;
        })
};

const dataFormSubmitHandle = () => {
    dataFormRef.value.validate(() => {
        baseService.post("/noc/nocuserexhibtionapply/update", dataForm).then((res) => {
            if (res.code === 0) {
                ElMessage.success("修改成功");
                visible.value = false;
                emit("refreshDataList");
            }
        });
    });
};

defineExpose({ init });
</script>